<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<script src="../public-js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../public-js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				overflow: hidden;
				background:red;
			}
			
			.protagonist {
				width: 20px;
				height: 40px;
				background-color: #0085C8;
				position: absolute;
				left: 50%;
				bottom: 0;
				margin-left: -10px;
			}
			
			.stairs {
				width: 100px;
				height: 20px;
				background: #ff00ff;
				opacity: 0.5;
				position: absolute;
				left: 50%;
				bottom: 0;
				margin-left: -50px;
			}
			
			#person{
				position: absolute;
				right: 3.2rem;
				bottom: 10.3333rem;
				width: 6.6133rem;
				height: 6.7733rem;
			}
			.personAni{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 6.6133rem;
				height: 6.7733rem;
			}
			.wingImg,.wingTxt{
				position: absolute;
			}
		</style>
<!--		<img src="images/wingIcon3.png"/>-->
		<!--332 231-->
		<input id="range" type="range" value="0" min="-100" max="100" step="1" style="width: 200px;" />滑块模拟重力加速度
		<div id="protagonist" class="protagonist"></div>
		<div id="person">
			<!--<img src="images/person1.png" class="personAni"/>-->
		</div>
		<script>
			
			
			
			
		</script>
		<!--<script type="text/javascript">
			$(function() {
				var t0 = 0.018;//默认屏幕刷新时间

				var $P = $('#protagonist');//人物
				var X0 = parseFloat($P.css('left')),//人物初始位置x
					Y0 = parseFloat($P.css('bottom'));//人物初始位置y

				var Vy0 = 400,//初始y轴速度
					Vx0 = 0,//初始x轴速度
					ay = 600,//初始y轴加速度
					ax = 0;//初始x轴加速度

				var Xt = X0,//人物当前位置x
					Yt = Y0,//人物当前位置y
					Vyt = Vy0,//人物当前y轴速度
					Vxt = Vx0,//人物当前x轴速度
					ayt = ay,//人物当前y轴加速度
					axt = ax;//人物当前x轴加速度

				var ground = 0,//地面y轴位置
					winW = $(window).width();//屏幕宽
				var endG = false;//是否结束
				var LocFn = function() {//人物运动函数
					Vxt = Vxt + axt * t0;
					Vyt = Vyt - ayt * t0;
					Xt = Vxt * t0 + Xt;
					Yt = Vyt * t0 + Yt;
					$P.css({
						'left': Xt,
						'bottom': Yt,
					});
					if(Vyt <= 0 && Yt <= ground) {
						if(Yt > -10) {
							Vyt = Vy0;
						} else {
							endG = true;
							alert('哦噢，死了！');
						}
					};
					if(Xt > winW + 30) {
						Xt = -30
					};
					if(Xt < -30) {
						Xt = winW + 30
					}
				};
				/*JQ自定义input事件*/
//				var ie = !-[1, ];
//				$.fn.input = function(Fn) {
//					if(ie) {
//						$(this).on('propertychange', function() {
//							Fn.apply(this);
//						})
//					} else {
//						$(this).on('input', function() {
//							Fn.apply(this);
//						})
//					}
//				};
//				/**/
//				$('#range').input(function() {//模拟重力加速度
//					axt = this.value * winW * 0.02;
//				});
				
				window.addEventListener("deviceorientation",function(){
					var gamma = Math.ceil(event.gamma);
					axt=gamma*2;
				}, false);
				
				//_this.x += 3*_this.speedAdd*_this.gameGamma;
				/**/
				var $stair = $('<div class=stairs>');//创建台阶

				var stairsL = [//台阶位置数组
					[0.4, 100, 1],
					[0.5, 200, 2],
					[0.7, 300, 3],
					[0.6, 400, 4],
					[0.5, 500, 5],
					[0.4, 600, 6],
					[0.5, 700, 7],
					[0.5, 800, 8],
					[0.5, 900, 9]
				];

				for(var i = 0; i < stairsL.length; i++) {//渲染台阶
					stairsL[i][0] = stairsL[i][0] * winW;
					$stair.clone().appendTo('body').css({
						'left': stairsL[i][0],
						'bottom': stairsL[i][1]
					});
					$stairs = $('.stairs');
				};

				/**/
				var collideFn = function() {//登上台阶函数
					if(Vyt < 0) {
						for(var i = 0; i < stairsL.length; i++) {
							if(Yt <= stairsL[i][1] + 10 && Yt - Vyt * t0 >= stairsL[i][1] + 10) {
								if(Xt >= stairsL[i][0] - 50 && Xt <= stairsL[i][0] + 50) {
									//console.log('登上台阶' + stairsL[i][2]);
									if(stairsL[i][2]==1){
										console.log('登上台阶1');
									}
									Vyt = Vy0;
									if(Yt > 300) {//触发画布相对运动
										falldownB = true;
									}
								}
							}
						}
					}
				};

				/**/
				var falldownB = false,//触发画布相对运动布尔值
					falldownC = 0,//计数器
					falldown = 0;//下降台阶数
				var $stairs = $('.stairs');//所有台阶
				var falldownFn = function() {//画布相对运动函数
					if(falldownB) {
						ground -= 5;
						Yt -= 5;
						$P.css({
							'bottom': Yt,
						})
						for(var i = 0; i < stairsL.length; i++) {
							stairsL[i][1] -= 5;
						}
						$stairs.css('bottom', '-=5');
						falldownC++;
						if(falldownC == 20) {
							falldownB = 0;
							falldownC = 0;
							falldown++;
							refreshFn();
						}
					}
				};
				/**/
				var refreshFn = function() {//更新台阶
					if(stairsL[0][1] < -10) {
						stairsL.shift();
						stairsL.push([Math.random(), stairsL[stairsL.length - 1][1] + 100, stairsL.length + i]);
						stairsL[stairsL.length - 1][0] = stairsL[stairsL.length - 1][0] * winW;
						$stair.clone().appendTo('body').css({
							'left': stairsL[stairsL.length - 1][0],
							'bottom': stairsL[stairsL.length - 1][1]
						});
						$stairs = $('.stairs');
					}
				};

				window.requestAnimFrame = (function() {
					return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
						window.setTimeout(callback, 1000 / 60);
					};
				})();

				var render = function() {
					LocFn();
					collideFn();
					falldownFn();
					if(!endG) {
						window.requestAnimationFrame(render);
					}
				}; //调用render方法
				render();
			})
		</script>-->
	</body>

</html>